<!--代码逻辑和样式库-->
<script src="./module-management.component.js"></script>
<style src="./module-management.scss" scoped lang="scss"></style>

<template>
  <div>
    <div class="content-container">
      <el-row :gutter="10">
        <el-col :span="19" align="right" class="buttons-container aq-vertical-middle flex-end">
          <!-- 操作按钮 -->
          <el-button v-waves v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-edit" @click="openDialogForm('createDialogFormVisible', false)">
            新建根模块
          </el-button>
        </el-col>
        <el-col :span="5" align="right" class="buttons-container aq-vertical-middle flex-end">
          <el-button v-if="codesCheck.indexOf('Create') !== -1" v-waves class="filter-item" type="success" icon="el-icon-edit" @click="openDialogForm('createKeyCodeFormVisible', false)">
            新建操作码
          </el-button>
        </el-col>
      </el-row>
    </div>
    <!--  内容区  -->
    <div class="content-container">
      <el-row :gutter="10">
        <el-col :span="19" class="scroll-container">
          <el-table
            :data="formData.data"
            row-key="id"
            border
            highlight-current-row
            @row-click="getList"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="id" label="ID" width="100" align="center"/>
            <el-table-column prop="name" label="模块名称" />
            <el-table-column prop="path" label="url" />
            <el-table-column prop="icon" label="图标" width="110"/>
            <el-table-column prop="sort" label="排序" width="50" align="center"/>
            <el-table-column prop="description" label="说明" />
            <el-table-column label="操作" width="240px" align="center">
              <template slot-scope="scope">
                <el-button v-if="codesCheck.indexOf('Create') !== -1" size="mini" type="success" @click="openDialogForm('createDialogFormVisible',scope.row)">新建</el-button>
                <el-button v-if="codesCheck.indexOf('Edit') !== -1" size="mini" type="primary" @click="openDialogForm('editDialogFormVisible',scope.row)">编辑</el-button>
                <el-button v-if="codesCheck.indexOf('Delete') !== -1" size="mini" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="5">
          <el-table :data="keyCodeList" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作码" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.permission }}</span>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="confirmDeleteKeyCode(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!--新建模块-->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="createDialogFormVisible" width="500px">
      <el-form ref="dataForm" :rules="departmentEditRules" :model="departmentCreateForm" label-position="right">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item prop="name" label="模块名称:" label-width="85px">
              <el-input v-model="departmentCreateForm.name" />
            </el-form-item>
            <el-form-item prop="code" label="模块别名:" label-width="85px">
              <el-input v-model="departmentCreateForm.code" />
            </el-form-item>
            <el-form-item prop="pid" label="父级ID:" label-width="85px">
              <el-input v-model="departmentCreateForm.pid" />
            </el-form-item>
            <!--<el-form-item prop="text" label="链接:" label-width="85px">-->
            <!--<el-input v-model="departmentCreateForm.text" ></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="页面路径:" label-width="85px">
              <el-input v-model="departmentCreateForm.path" />
            </el-form-item>
            <el-form-item label="页面图标:" label-width="85px">
              <el-input v-model="departmentCreateForm.icon" />
            </el-form-item>
            <el-form-item prop="sortCode" label="排序号:" label-width="85px">
              <el-input v-model="departmentCreateForm.sortCode" />
            </el-form-item>
            <!--<el-form-item label="是否启用:" label-width="85px">-->
            <!--<el-switch v-model="departmentCreateForm.isEnable"></el-switch>-->
            <!--</el-form-item>-->
            <el-form-item label="模块说明:" label-width="85px">
              <el-input v-model="departmentCreateForm.description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :lg="24" align="right">
            <el-button class="action-btn" type="primary" @click="createStruct">确定</el-button>
            <el-button class="action-btn" @click="createDialogFormVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--编辑-->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="editDialogFormVisible" width="500px">
      <el-form ref="dataFormEdit" :rules="departmentEditRules" :model="departmentEditForm" label-position="right">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item prop="name" label="模块名称:" label-width="85px">
              <el-input v-model="departmentEditForm.name" />
            </el-form-item>
            <el-form-item prop="code" label="模块别名:" label-width="85px">
              <el-input v-model="departmentEditForm.code" :disabled="true" />
            </el-form-item>
            <el-form-item prop="pid" label="父级ID:" label-width="85px">
              <el-input v-model="departmentEditForm.pid" />
            </el-form-item>
            <!--<el-form-item prop="text" label="链接:" label-width="85px">-->
            <!--<el-input v-model="departmentEditForm.text" ></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="页面路径:" label-width="85px">
              <el-input v-model="departmentEditForm.path" />
            </el-form-item>
            <el-form-item label="页面图标:" label-width="85px">
              <el-input v-model="departmentEditForm.icon" />
            </el-form-item>
            <el-form-item prop="sortCode" label="排序号:" label-width="85px">
              <el-input v-model="departmentEditForm.sortCode" />
            </el-form-item>
            <!--<el-form-item label="是否启用:" label-width="85px">-->
            <!--<el-switch v-model="departmentEditForm.isEnable"></el-switch>-->
            <!--</el-form-item>-->
            <el-form-item label="模块说明:" label-width="85px">
              <el-input v-model="departmentEditForm.description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :lg="24" align="right">
            <el-button class="action-btn" type="primary" @click="editStruct">确定</el-button>
            <el-button class="action-btn" @click="editDialogFormVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--编辑操作码-->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="createKeyCodeFormVisible" width="500px">
      <el-form ref="dataFormKeyCode" :rules="departmentEditRules" :model="keyCodeData" label-position="right">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item prop="name" label="操作名称:" label-width="85px">
              <el-input v-model="keyCodeData.name" />
            </el-form-item>
            <el-form-item prop="permission" label="操作码:" label-width="85px">
              <el-input v-model="keyCodeData.permission" />
            </el-form-item>
            <el-form-item prop="sortCode" label="排序:" label-width="85px">
              <el-input v-model="keyCodeData.sortCode" />
            </el-form-item>
            <el-form-item label="所属模块:" label-width="85px">
              <el-input v-model="keyCodeData.serviceCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :lg="24" align="right">
            <el-button class="action-btn" type="primary" @click="createKeyCode">确定</el-button>
            <el-button class="action-btn" @click="createKeyCodeFormVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
